<template>
	<view>
		<view style="height: 30rpx;"></view>
		
		<view class="cardBox" style="margin-top: 0rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.car_apply}}  </text> 
				</view>
			</view>
			
			
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<actionSheet v-if="loading" :item="item_transport" @change="selActionSheet" />
			</view>
			
			
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<u-form-item >
					<u-input v-model="driver_number"  :custom-style="{height:'50rpx'}" height="50"  type="text"  :placeholder="$t('请输入车牌号/班次信息')"/>
				</u-form-item>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<formImages v-if="loading" :item="item_img" @change="selImages" />
			</view>
		</view>
		
		
		<view class="cardBox" style="margin-top: 0rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.apply}}  </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view>{{$t("司机名称")}}</view>
				<u-form-item >
					<u-input v-model="driver"  :custom-style="{height:'50rpx'}" height="50"  type="text"  :placeholder="$t('请输入司机信息')"/>
				</u-form-item>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view>{{$t("联系方式")}}</view>
				<u-form-item >
					<u-input v-model="driver_tel"  :custom-style="{height:'50rpx'}" height="50"  type="number" :placeholder="$t('请输入联系方式')"/>
				</u-form-item>
			</view>
		</view>
		
		<view style="display: flex;width:90%;margin-left:5%">
			<view style="width: 100%;">
				<u-button v-if="xg==0" @click="subForm()"  style="" :custom-style="customStyle2" hover-class="none" :disabled="subDisabled" type="primary"
					>
					{{ $t('确认添加') }}
				</u-button>
				<u-button v-else @click="subForm()"  style="" :custom-style="customStyle2" hover-class="none" :disabled="subDisabled" type="primary"
					>
					{{ $t('确认修改') }}
				</u-button>
			</view>
		</view>
		<view style="height: 30px;"></view>	
		
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	import formImages from "@/components/buildForm/formImages.vue";
	import actionSheet from "@/components/buildForm/actionSheet.vue";
	
	export default {
		components: {
			formImages,actionSheet
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				//文字
				text:{
					apply:this.$t('司机信息'),
					car_apply:this.$t('车辆信息'),
				},
				subDisabled:false,
				loading:false,
				driver_images:[],
				item_img:{required:false,key:'images',value:[]},
				item_transport:{
					key: "release_transport",
					label: "运输方式",
					placeholder: "请选择运输方式 >",
					type: "actionSheet",
					required: false,
					value: {
						pid: 0,
						value: '汽运',
						text: '汽运',
						level: 1,
						type: 'release_transport',
					},
					rules: {},
					child: {
						key: "car_category_id",
						label: "车型",
						placeholder: "请选择车型 >",
						type: "actionSheet",
						required: false,
						value: {
							pid: 744,
							value: 0,
							text: '',
							level: 2,
							type: 'release_transport',
						},
						rules: {},
					}
				},
				
				customStyle2: {
					width: '500rpx',
					height: '83rpx',
					marginTop:'20rpx',
					fontSize:'24rpx',
					background: '#ff2323',
					borderRadius: '56rpx'
				},
				
				driver_tel:'',
				driver:'',
				driver_number:'',
				mode:'',
				car_category_id:'',
				
				id:'',
				join_order_id:'',
				status:'',
				xg:0,
			}
		},
		onLoad(options) {
			if(options.id){
				this.id=options.id
				this.join_order_id=options.join_order_id
				this.status=options.status
			}
			if(options.xg){
				this.xg=options.xg
			}
			var that = this
			that.$u.api.order.driverInfo({
				id:that.id,
				lang:that.lang
			}).then(res => {
				that.driver=res.orderInfo.driver
				that.driver_tel=res.orderInfo.driver_tel
				that.driver_number=res.orderInfo.driver_number
				that.driver_images = res.orderInfo.driver_images
				
				if(res.orderInfo.driver_images){
					var image = res.orderInfo.driver_images.split(',');
					var arr = [];
					for(var i=0;i<image.length;i++){
						arr.push({url:that.IMAGE_URL+image[i]});
					}
					that.item_img={required:false,key:'images',value:arr}
				}
				
				
				if((res.orderJoin.car_category_id)&&(res.orderJoin.car_category_id.value!=0)){
					if(res.orderJoin.release_transport){
						that.item_transport={
							key: "release_transport",
							label: "运输方式",
							placeholder: "请选择运输方式 >",
							type: "actionSheet",
							required: false,
							value: {
								pid: 0,
								value: res.orderJoin.release_transport.value,
								text: res.orderJoin.release_transport.text,
								level: 1,
								type: res.orderJoin.release_transport.type,
							},
							rules: {},
							child: {
								key: "car_category_id",
								label: "车型",
								placeholder: "请选择车型 >",
								type: "actionSheet",
								required: false,
								value: {
									pid: res.orderJoin.release_transport.value,
									value: res.orderJoin.release_transport.child.value,
									text: res.orderJoin.release_transport.child.text,
									level: 2,
									type: res.orderJoin.release_transport.type,
								},
								rules: {},
							}
						}
					}
				}

				that.loading=true
			})
		},
		onReady() {
			if(this.xg==1){
				uni.setNavigationBarTitle({		//自定义标题
					title: this.$t("修改司机")
				})
			}else{
				uni.setNavigationBarTitle({		//自定义标题
					title: this.$t("添加司机")
				})
			}
		},
		methods:{
			subForm(){
				const that = this
				if((that.driver=='')||(that.driver==null)){
					uni.showModal({
						content: that.$t('请输入司机名称'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					return false;
				}
				if((that.driver_tel=='')||(that.driver_tel==null)){
					uni.showModal({
						content: that.$t('请输入联系方式'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					return false;
				}
				uni.showLoading({
					title: "Loading...",
					mask: true
				})
				that.$u.api.order.saveDriver({
					id:that.id,
					lang:that.lang,
					mode:that.mode,
					car_category_id:that.car_category_id,
					driver:that.driver,
					driver_tel:that.driver_tel,
					driver_images:that.driver_images,
					driver_number:that.driver_number
				}).then(res => {
					uni.hideLoading();
					
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/ordering/orderDetail?id='+that.id+'&join_order_id='+that.join_order_id+'&status='+that.status+'&isDetail=true'
						  });
					}, 2000);
					
					return false;
				})
			},
			selImages(e,data){
				this.driver_images=data
			},
			selActionSheet(key, value,list) {
				//console.log({'key':key,'value':value,'list':list})
				//this.formData[key] = value	
				if(key=='release_transport'){
					if(value==0){this.mode = '汽运'}
					if(value==1){this.mode = '空运'}
					if(value==2){this.mode = '海运'}
					if(value==3){this.mode = '火车'}
					if(value==4){this.mode = '不限'}
				}
				if(key=='car_category_id'){
					this.car_category_id = value
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "uview-ui/index.scss";
	@import "@/common/orderDetail.scss";
</style>